<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>汽车信息列表</title>
  <link rel="stylesheet" href="../../layui/css/layui.css">
  <link rel="stylesheet" href="../../css/global.css">
  <link rel="stylesheet" href="../../css/admin.css">
  <script src="../../layui/layui.js"></script>
</head>
<body style="padding-top: 10px">

<form class="layui-form" id="f1">
  <div class="layui-inline">
    <div class="layui-input-block">
      <input type="text" name="rvBrand" id="search_rvBrand" style="width: 200px;"  placeholder="请输入酒店名称" autocomplete="off" class="layui-input">
    </div>
  </div>

  <div class="layui-inline">
    <select name="productType" id="search_rvType" lay-filter="type" lay-search="">
      <option value="">客房类型</option>
    </select>
  </div>

  <div class="layui-inline">
    <input type="button" id="selectBtn" class="layui-btn" data-type="reload" value="查询">
  </div>
  <div class="layui-inline">
    <input type="button" id="addBtn" class="layui-btn" data-type="reload" value="添加">
  </div>
</form>

<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="show">修改</a>
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="delete">删除</a>
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="detail">查看详情</a>
  </div>
</script>

<!-- 动态数据表格-->
<!-- 第一：定义页面结构 -->
<table id="table" lay-filter="test" style="width: 80%;text-align: center" class="layui-table"></table>

<!-- 添加表单开始 -->
<div id="addContainer" style="display: none">
  <form class="layui-form" id="addForm" lay-filter="example" style="margin: 1rem">

    <div class="layui-form-item">
      <label class="layui-form-label">会员名</label>
      <div class="layui-input-block">
        <input type="text" id="add-rvBrand" name="userName"
               autocomplete="off" class="layui-input" />
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">密码</label>
      <div class="layui-input-block">
        <input type="password" id="add-password" name="password"
               autocomplete="off" class="layui-input" />
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">性别</label>
      <div class="layui-input-block">
        <input type="text" id="add-rvColour" name="sex"
               autocomplete="off" class="layui-input" />
      </div>
    </div>


    <div class="layui-form-item">
      <label class="layui-form-label">电话</label>
      <div class="layui-input-block">
        <input type="text" id="add-rvPrice" name="phone"
               autocomplete="off" class="layui-input" />
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">邮箱</label>
      <div class="layui-input-block">
        <input type="text" id="add-rvHirePrice" name="email"
               autocomplete="off" class="layui-input" />
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">所在地区</label>
      <div class="layui-input-block">
        <input type="text" id="add-rvDeposit" name="address"
               autocomplete="off" class="layui-input" />
      </div>
    </div>
  </form>
</div>
<!-- 添加表单结束 -->

<!-- 修改表单开始 -->
<div id="updateContainer" style="display: none">
  <form class="layui-form" id="update" lay-filter="example" style="margin: 1rem">
    <div class="layui-form-item">
      <label class="layui-form-label">会员id</label>
      <div class="layui-input-block">
        <input type="text" id="update-id" name="uid"
               autocomplete="off" class="layui-input" />
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">会员名</label>
      <div class="layui-input-block">
        <input type="text" id="update-name" name="username"
               autocomplete="off" class="layui-input" />
      </div>
    </div>


    <div class="layui-form-item">
      <label class="layui-form-label">密码</label>
      <div class="layui-input-block">
        <input type="text" id="update-password" name="passwords"
               autocomplete="off" class="layui-input" />
      </div>
    </div>


    <div class="layui-form-item">
      <label class="layui-form-label">性别</label>
      <div class="layui-input-block">
        <input type="text" id="update-sex" name="uSex"
               autocomplete="off" class="layui-input" />
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">电话</label>
      <div class="layui-input-block">
        <input type="text" id="update-phone" name="uPhone"
               autocomplete="off" class="layui-input" />
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">邮箱</label>
      <div class="layui-input-block">
        <input type="text" id="update-email" name="uEmail"
               autocomplete="off" class="layui-input" />
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">地区</label>
      <div class="layui-input-block">
        <input type="text" id="update-address" name="uAddress"
               autocomplete="off" class="layui-input" />
      </div>
    </div>
  </form>
</div>
<!-- 修改表单结束 -->

<script>
  layui.use(['jquery','table','layer','form','upload'],function(){
    // 实例化动态表格的实例对象
    let $ = layui.jquery;
    let table = layui.table;
    let layer = layui.layer;
    let form = layui.form;
    let upload = layui.upload;

    //加载产品类型 - 回显在下拉列表框
    $.ajax({
      url:'/list/select',
      type:'get',
      success:function (res){
        if (res.code == 200){
          //循环遍历数组或集合
          $.each(res.data,function (index,obj){
            //搜索表单下拉列表框
            $('#search_rvType').append('<option value="' + obj.rvType + '">' + obj.rvType + '</option>');
            //添加表单下拉列表框
            $('#add-typeid').append('<option value="' + obj.typeId + '">' + obj.rvType + '</option>');
          });
          form.render('select')
        }
      }
    });


    // 定义动态表格相关的参数
    table.render({
      elem: '#table'
      ,id:'tableReload'
      ,url:'/user/getUser'
      ,title:'会员列表'
      ,page: true 	// 开启分页
      ,limit:5
      ,limits:[5,10]
      ,cols:[[
        // {field: '实体对象的属性名称', title: '列头显示内容', width:宽, sort: 是否排序, fixed: '定位'}
        {field: 'id', title: '会员编号', width:100 }
        ,{field: 'userName', title: '会员名', width:100}
        ,{field: 'sex', title: '性别', width:100}
        ,{field: 'phone', title: '电话', width:150}
        ,{field: 'email', title: '邮箱', width:200}
        ,{field: 'address', title: '地址', width:110}
        ,{field: 'time',title: '注册时间',width: 200}
        ,{toolbar:'#toolbarDemo' ,title: '操作'}
      ]]

    });


    // 监听工具条中相关的按钮，实现相关的操作
    // 监听 test 行工具事件 - 实现删除与修改操作
    table.on('tool(test)',function (obj){
      // 获取当前行的数据
      let currentRow = obj.data;
      // 获取table工具条件的具体事件，事件名称通过lay-event定义
      let layuiEvent = obj.event;

      //修改
        $('#update-id').val(currentRow.id);
        $('#update-name').val(currentRow.userName);
        $('#update-password').val(currentRow.password);
        $('#update-sex').val(currentRow.sex);
        $('#update-phone').val(currentRow.phone);
        $('#update-email').val(currentRow.email);
        $('#update-address').val(currentRow.address);
        form.render();
        layer.open({
          type:1,
          title:'管理员修改信息',
          area:['50%','35em'],
          resize:false,
          content:$("#updateContainer"),
          btn:['修改','取消'],
          btn1:function (index){

            let update = $('#update').serialize();

            $.ajax({
              url:'/user/update',
              method:'post',
              data: update,
              success:function (res){
                //弹出提示框
                layer.msg(res.message);
                //根据弹出层的索引，关闭弹出确认框
                layer.close(index);

                if (res.code==200){
                  //重新加载表格数据
                  table.reload('tableReload',{page:{curr:1}});
                }
              }
            })
          }
        })
    });


    //实现添会员操作
    $("#addBtn").click(function (){
      layer.open({
        type:1,
        title:'添加会员',
        area:['50%','35em'],
        resize:false,
        content:$("#addContainer"),
        btn:['添加','取消'],
        btn1:function ( index ){
          let formDate = $('#addForm').serialize();
          $.ajax({
            url:'',
            method:'post',
            data:formDate,
            success:function ( res ){
              //弹出提示框
              layer.msg(res.message)
              //根据弹出层的索引，关闭弹出确认框
              layer.close(index);

              if (res.code == 200){
                //重新加载表格数据
                table.reload('tableReload',{page: {curr:1}})
              }
            }
          })
        },
      });
    });



  });

</script>



</body>
</html>